<script setup>
import Insert3333 from "@/views/material/process/insert333.vue"
import {ref,defineEmits,defineProps} from "vue";
import request  from '@/api/request'
import { useRouter } from "vue-router"
import { Delete, Edit, Search, Plus, Refresh } from '@element-plus/icons-vue'
let emits=defineEmits(["ref-table"])
let router = useRouter();
let props = defineProps(["data1"])


let isVisible1 = ref(false)
let data = ref()
let title = ref("")
let materdata = ref([])
let materialId=ref([])

let MaterialManagement=ref({...props.data1})
let refTanle1 = (a) => {
    let detailId=MaterialManagement.value.detailId;
    let processRouteId=MaterialManagement.value.processRouteId;
    
    MaterialManagement.value= {...a.value};

    MaterialManagement.value.detailId=detailId;
    MaterialManagement.value.processRouteId=processRouteId;

    
    isVisible1.value = false;
}

let select = () => {
    title.value = "物料产品选择";
    isVisible1.value = true;
    
}
let onSubmit = () => {
     request({
        url: '/materialDetail/update',
        method: 'put',
        data:{
            ...MaterialManagement.value
        }
    }).then(res => {
         emits("ref-table", MaterialManagement.value)
    })
   
}

</script>
<template>
    <div>
        <el-card>
            <template #header>
                <el-form :model="MaterialManagement" ref="form"  :inline="false"  class="card_wrap" style="padding-left: 70px;">
                    <el-form-item label="产品物料编码" class="c_item">  
                            <el-input
                            v-model="MaterialManagement.materialId"
                            style="max-width: 600px"
                            placeholder=""
                            class="input-with-select">
                            <template #append>
                                <el-button :icon="Search" @click="select"/>
                            </template>
                            </el-input>
                    </el-form-item>
                    <el-form-item label="产品物料名称" class="c_item">
                            <el-input v-model="MaterialManagement.materialName" style="width: 150px;" disabled placeholder="请选择物料或产品"></el-input>
                    </el-form-item>

                    <el-form-item  label="单位" class="c_item">
                            <el-input v-model="MaterialManagement.unit" style="width: 150px;" disabled placeholder="请选择物料或产品"></el-input>
                    </el-form-item>
                   
                    <el-form-item label="规格型号" class="c_item_big">
                             <el-input v-model="MaterialManagement.specificationsAndModels" style="width: 150px;" disabled placeholder="请选择物料或产品"></el-input>
                    </el-form-item>
                    <el-form-item label="备注" class="c_item_big">
                            <el-input v-model="MaterialManagement.remark" placeholder="请输入内容" style="width: 800px;"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit" class="right-buttom">确定修改</el-button>
                    </el-form-item>
                </el-form>
            </template>
            <div style="width:800px">
                        <el-dialog :title="title" v-model="isVisible1" :destroy-on-close="true" width="60%">
                            <!-- <router-view @ref-table1="refTanle1" :data="data">
                            </router-view> -->
                            <Insert3333 @ref-table1="refTanle1" :data="data"></Insert3333>
                        </el-dialog>
                    </div>
        </el-card>
        <router-view/>
    </div>
</template>
<style scoped>
.c_item {
    flex: 1;
    margin: 0px 5px 15px 0;
    width: calc((100%-10px)/3);
    min-width: calc((100% - 10px)/3);
    max-width: calc((100% - 10px)/3);

    &:nth-child(3n) {
        margin-right: 0;
    }
}
.c_item_big {
    flex: 2;
    margin: 0px 5px 15px 0;
    width: calc((100%-10px)/1);
    min-width: calc((100% - 10px)/1);
    max-width: calc((100% - 10px)/1);

    &:nth-child(3n) {
        margin-right: 0;
    }
}
.card_wrap {
    width: 98%;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.right-bottom{
 margin-top: 10px;
 padding-left: 850px ;
}
</style>